<template>
	<view class="m-upload-list">
		<view class="m-upload-list-item" v-for="(item, index) in list" :key="index" @click="bindTapListItem(item, index)">
			<image :src="item" mode="aspectFill"></image>
			<text class="m-upload-item-delete" @click="bindTapItemDelete(index)"></text>
		</view>
		<view class="m-upload-btn m-upload-list-item" @click="bindTapMUploadBtn" v-if="isShowUploadBtn">
			<image mode="widthFix" src="/static/images/jia1.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
			total: {
				type: Number|String,
				default: 1
			}
		},
		computed: {
			isShowUploadBtn() {
				return (parseInt(this.total) - this.list.length) > 0;
			},
			uploadTotal() {
				return (parseInt(this.total) - this.list.length);
			}
		},
		methods: {
			bindTapMUploadBtn() {
				uni.chooseImage({
					count: this.uploadTotal
				});
			},
			bindTapListItem(item, index) {},
			/**
			 * 文件上传成功 bindTapMUploadBtn方法上传成功之后调用 
			 * @param {Object} res
			 */
			success(res) {
				this.$emit('success', res);
			},
			/**
			 * 文件删除
			 * @param {Object} index
			 */
			bindTapItemDelete(index) {
				this.$emit('delete', index);
			}
		}
	}
</script>

<style lang="scss">
	.m-upload-list{
		width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fill, 175rpx);
		gap: 15rpx 25rpx;
		.m-upload-list-item{
			position: relative;
			height: 176rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
			.m-upload-item-delete{
				position: absolute;
				width: 36rpx;
				height: 36rpx;
				background: #ccc;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 5;
				top: -15rpx;
				right: -15rpx;
				&::after{
					content: ' ';
					width: 70%;
					height: 6rpx;
					border-radius: 6rpx;
					background-color: #f51702;
				}
			}
		}
		.m-upload-list-item.m-upload-btn{
			background-color: #F1F3F3;
			image{
				width: 54rpx;
				height: 54rpx;
			}
		}
	}

</style>
